<template>
  <div id="app">
    <div class="main-box">
      <div class="top-title">豆瓣电影 Top 250</div>
      <movieItem :data="item" v-for="(item) of movies" :key="item.id"></movieItem>
    </div>
  </div>
</template>

<script>
import movieItem from "./components/item";
import axios from "axios-jsonp-pro";
export default {
  name: "app",
  data() {
    return { movies: [] };
  },
  components: {
    movieItem
  },
  mounted() {
    var url = "https://douban.uieee.com/v2/movie/top250";
    axios.jsonp(url).then(res => {
      this.movies = res.subjects;
      // console.log(this.movies)
    });
  }
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
}
.main-box {
  margin: 0 10%;
}
.top-title {
  font-size: 26px;
  padding: 0 0 15px 0;
  font-weight: 700;
 margin:20px 0 50px;
}
</style>
